<template>
	<view>
		<cu-custom :bgLiner="true" :isBlack="false">
			<block slot="content">餐厅环境</block>
		</cu-custom>
		<view class="top-head" :style="{top:CustomBar+'px'}">
			<view class="sorts-item" v-for="(item,index) in sorts" :key="index" :class="{'sorts-act':current == item.id}" @click="changeCurrent(item)">
				{{item.name}}
			</view>
		</view>
		<view style="height: 102rpx;"></view>
		<view class="p-t-10 p-b-10 flex flex-wrap">
			<view class="img-box flex" :class="{'m-r-8':(index+1)%3!=0}" v-for="(item,index) in list" :key="index" @click="preImgOrVideo(item,index)">
				<view class="position-rel flex align-center">
					<image :src="item.url" class="imgs" v-if="item.type==1"></image>
					<image :src="item.url+'?x-oss-process=video/snapshot,t_1000,m_fast'" class="imgs" v-if="item.type==2"></image>
					<view class="play-icon" v-if="item.type==2">
						<view class="play-icon-center"></view>
					</view>
					<!-- <view class="times" v-if="item.type==2">
						11:20
					</view> -->
				</view>
			</view>
		</view>
		<view class="nodata" v-if="list.length==0">
			暂无数据~
		</view>
		<openVideo :src="videoSrc" ref="videoPlay"></openVideo>
	</view>
</template>

<script>
	import openVideo from '@/components/openVideo/open-video.vue';
	export default {
		components:{
			openVideo
		},
		data() {
			return {
				sorts:[{id:0,name:'全部'},{id:2,name:'视频'},{id:1,name:'照片'}],
				current:0,
				list:[],
				imgList:[],
				id:0,
				videoSrc:'',
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo();
		},
		methods: {
			changeCurrent(item){
				if(item.id == this.current)return;
				this.current = item.id;
				this.getInfo();
			},
			getInfo(){
				let data = {
					shop_id:this.id,
					type:this.current
				}
				this.$http('/apicloud/Shop/shopAmbient',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.list = datas;
						let arr = [];
						this.list.forEach((items,indexs)=>{
							if(items.type==1){
								arr.push(items.url);
							}
						})
						this.imgList = arr;
					}
				})
			},
			preImgOrVideo(item,index){
				if(item.type==1){
					let i = 0;
					this.imgList.forEach((items,indexs)=>{
						if(items==item.url){
							i = indexs;
						}
					})
					uni.previewImage({
						urls:this.imgList,
						current:i
					})
				}else{
					this.playVideos(item);
				}
			},
			playVideos(item){
				this.videoSrc = item.url;
				setTimeout(()=>{
					this.$refs.videoPlay.openMedia();
				},200)
			},
		}
	}
</script>

<style lang="less">
	.top-head{
		position: fixed;
		background: #ff5200;
		padding: 20rpx 30rpx;
		left: 0;
		width: 100%;
		height: 102rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 0 0 30rpx 30rpx;
		z-index: 23;
		.sorts-item{
			color: #ffffff;
			width: 180rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 0;
		}
		.sorts-act{
			background: #ffcb00;
			border-radius: 50rpx;
		}	
	}
	.img-box{
		width: 238rpx;
		margin-bottom: 14rpx;
		.imgs{
			height: 238rpx;
			width: 238rpx;
			background-color: #eee;
		}
	}
	.times{
		position: absolute;
		right: 0rpx;
		bottom: 5rpx;
		font-size: 24rpx;
		color: #ffffff;
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		background: rgba(0, 0, 0, .5);
		transform: scale(.8);
	}
	.play-icon{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #ffffff;
		color: #ffffff;
		border-radius: 50%;
		background: rgba(0, 0, 0, .5);
		transform:translate(-50%,-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		.play-icon-center{
			width: 0;
			height: 0;
			border-top: 16rpx solid transparent;
			border-bottom: 16rpx solid transparent;
			border-left: 28rpx solid #ffffff;
			border-right: 20rpx solid transparent;
			margin-left: 28rpx;
		}
	}
</style>
